<template>
  <body>
  <div class="container">
    <form>
      <label for="severity">严重性等级</label>
      <select id="severity" name="severity" v-model="application.defaultApplication.severity">
        <option value="低">低</option>
        <option value="中">中</option>
        <option value="高">高</option>
      </select>

      <label for="customername">顾客名称</label>
      <input type="text" placeholder="Customername" name="customername" id="customername" required v-model="application.defaultApplication.customerName">

      <label for="default_reason">违约原因</label>
      <div v-for="(item, index) in usedReasonList" :key="item.defaultReasonNumber">
        <div class="form-check">
          <input class="form-check-input" v-model="application.defaultReasonList" type="checkbox" v-bind:value=item.defaultReasonNumber id="flexCheckDefault">
          <label class="form-check-label" for="flexCheckDefault">
            ({{++index}})   {{item.defaultReason}}
          </label>
        </div>
      </div>


      <label for="note">备注</label>
      <input type="text" placeholder="Note" name="note" id="note" v-model="application.defaultApplication.note">
      <button type="button" value="submit" @click.prevent="submitApplication">submit </button>
    </form>
  </div>
  </body>


</template>

<script>
export default {
  name: 'AddNewApplication',
  data(){
    return {
      application: {
        defaultApplication: {
          severity: "",
          note: "",
          applicantAccount: "",
          customerName: ""
        },
        defaultReasonList: []
      },
      usedReasonList:[]

    }
  },

  methods: {
    async getUsedList() {
      const {data: res} = await this.$http.get('/defaultReason/getUsedReason')
      this.usedReasonList=res.data
    },

    async submitApplication(){
      if(this.application.defaultReasonList.length===0){
        alert('原因必填')
        return
      }

      this.application.defaultApplication.applicantAccount=localStorage.getItem("applicantAccount")
      const {data: res} = await this.$http.post('defaultApplication/addNewApplication',this.application)
      console.log(res.data)
      if (res.data===0){
        alert('申请成功')
      }else {
        alert('申请失败')
      }
    }

  },

  created() {
    this.getUsedList()
  }

}


</script>

<style lang="less" scoped>
body {
  background: url("https://img.zcool.cn/community/01d0535bf20c78a801209252303f71.jpg@1280w_1l_2o_100sh.jpg") no-repeat center center fixed;
  background-color: #f2f2f2;
  font-family: Arial, sans-serif;
  background-size:cover;
  background-attachment:fixed;

}

.container {
  margin: 20px auto;
  max-width: 700px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

h1 {
  text-align: center;
}

input[type="text"],
select[id="default_reason"],
select[id="severity"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: none;
  border-radius: 5px;
  background-color: #f2f2f2;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

input[type="submit"] {
  display: block;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background-color: #4c5baf;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #3e478e;
}
label[for="customername"]{
  margin-left: 10px;
  color:blue
}
label[for="customername"]::after {
  content: "*";
  color: red;
  margin-left: 0.2em;
}
label[for="severity"]{
  margin-left: 10px;
  color:blue
}
label[for="default_reason"]{
  margin-left: 10px;
  color:blue
}
label[for="default_reason"]::after {
  content: "*";
  color: red;
  margin-left: 0.2em;
}
label[for="note"]{
  margin-left: 10px;
  color:blue
}
</style>
